import React from 'react'
import "./TodoFooter.css"
export default function TodoFooter(props) {
    //解构赋值
    let {todolist,clearOkDone,checkedAllDone} = props;


    //点击 切换全选与取消全选
    let checkedAll = (e) => {
        // 调用 todolist 组件中的方法
        checkedAllDone(e.target.checked);

    }

    return (
        <div className="todo-footer">
            <label>
                <input 
                    type="checkbox" 
                    checked={todolist.every(item => item.done) && todolist.length !== 0}    
                    onChange={checkedAll}  
                />
            </label>
            <span>
                <span>已完成 {todolist.filter(item => item.done).length}</span> / 全部 {todolist.length}
            </span>
            <button className="btn btn-danger" onClick={clearOkDone}>清除已完成任务</button>
        </div>
    )
}
